<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!--header-->
    <div class="layui-header">
        <div class="layui-logo">这里可以放logo</div>
        <ul id="nav-right" class="layui-nav layui-layout-right">
            <!--导航个人信息插入定位点-->
        </ul>
    </div>
    <!--header end-->

    <!--nav bar-->
    <div class="layui-side layui-bg-black">
        <div id="nav-bar" class="layui-side-scroll">
            <!--导航菜单模板插入定位点-->
        </div>
    </div>
    <!--nav bar end-->

    <!--main-->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: -15px; height: 100%; width: 100%">
            <iframe width="100%" height="99%" name="frame" scrolling="no" frameborder="no" border="0" marginwidth="0"
                    marginheight="0" src="./main.html"></iframe>
        </div>
    </div>
    <!--main end-->

    <!--footer-->
    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
    <!--footer end-->
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="../static/plugin/layui/layui.js"></script>
<script src="../static/plugin/layui/modules/baajax.js"></script>
<script src="../static/js/common.js"></script>
<!--导航右上个人信息模板-->
<script id="tpl_user_info_nav" type="text/html">
    <li class="layui-nav-item">
        <a href="javascript:;">
            <img src="{{ d.avator || 'http://t.cn/RCzsdCq' }}" class="layui-nav-img">
            {{ d.departmentName }}-{{ d.name||d.loginName }}
        </a>
        <dl class="layui-nav-child layui-form">
            <dd><a lay-submit lay-filter="userInfo">基本资料</a></dd>
            <dd><a lay-submit lay-filter="safeSet">安全设置</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item ayui-form"><a lay-submit lay-filter="logOut">退出</a></li>
</script>
<!--导航右上个人信息模板-->
<!--导航菜单模板-->
<script id="tpl_nav" type="text/html">
    <ul class="layui-nav layui-nav-tree">
        {{# layui.each(d,function(index,item){ }}
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">{{ item.icon }}</i>{{item.title}}</a>

            <dl class="layui-anim-scale layui-nav-child">
                {{# layui.each(item.menuSelectVoList, function(index,item){ }}
                <dd><a href="{{item.uri}}" target="frame">{{item.title}}</a></dd>
                {{# }); }}
            </dl>
        </li>
        {{# }); }}
    </ul>
</script>
<!--导航菜单模板 end-->
<script id="tpl_user_info" type="text/html">
    <div class="layui-form" style="width: 450px; margin-top: 30px">
        <input type="hidden" name="id" value={{=d.id}}>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                       class="layui-input" value={{=d.name}}>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                {{# if(!d.sex){ }}
                <input type="radio" name="sex" value=true title="男">
                <input type="radio" name="sex" value=false title="女" checked>
                {{# }else{ }}
                <input type="radio" name="sex" value=true title="男" checked>
                <input type="radio" name="sex" value=false title="女">
                {{# } }}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">出生日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" id="birthday" name="birthday" lay-verify="required|date">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系方式</label>
            <div class="layui-input-block">
                <input type="text" name="age" required lay-verify="required|phone" placeholder="请输入联系方式"
                       autocomplete="off" class="layui-input" value={{=d.cellphone}}>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱地址</label>
            <div class="layui-input-block">
                <input type="text" name="age" required lay-verify="required|email" placeholder="请输入邮箱地址"
                       autocomplete="off" class="layui-input" value={{=d.email}}>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">个性描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入个性描述" class="layui-textarea">{{=d.description}}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                {{# if(d.enable === false){ }}
                <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value=true>
                {{# }else{ }}
                <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value=true checked>
                {{# } }}
            </div>
        </div>
        <input type="hidden" value={{=d.version}}>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formData">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</script>
<script id="tpl_safe_set" type="text/html">
    <div class="layui-form" style="width: 450px; margin-top: 30px">
        <div class="layui-form-item">
            <label class="layui-form-label">原密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入原密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPassword" lay-verify="required" placeholder="请输入新密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">再次确认</label>
            <div class="layui-input-block">
                <input type="password" lay-verify="required|rePassword" placeholder="请输入新密码"
                       autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formSafeSet">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</script>
<script type="text/javascript">
    layui.use(['layer', 'element', 'laytpl', 'jquery', 'form', 'laydate'], function () {
        var layer = layui.layer;
        var element = layui.element;
        var laytpl = layui.laytpl;
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;

        /*模板渲染*/
        var getNav = tpl_nav.innerHTML;
        var getUserInfoNav = tpl_user_info_nav.innerHTML;
        var navView = document.getElementById('nav-bar');
        var userInfoView = document.getElementById('nav-right');
        var user_info_index;
        var safe_set_index;

        $.get('/persional/resources/menu/list', null, function (res) {
            laytpl(getNav).render(res.data, function (html) {
                navView.innerHTML = html;
            });
            laytpl(getUserInfoNav).render(layui.data('user'), function (html) {
                userInfoView.innerHTML = html;
            });
            element.init();
        });
        /*模板渲染*/

        /*退出按钮事件监听*/
        form.on('submit(logOut)', function () {
            $.get('/persional/account/logout', null, function (res) {
                if (res.errcode) {
                    layer.msg('正在清除登录信息', {time: 1000}, function () {
                        layui.data('user', null);
                        parent.location.href = base_url + '/login.html';
                    });
                } else {
                    layer.msg(res.errmsg, {time: 1000});
                }
            })
        });
        /*退出按钮事件监听*/

        /*个人资料按钮事件监听*/
        form.on('submit(userInfo)', function () {
            var user = layui.data('user');
            $.get('/persional/userInfo/get/' + user.id, null, function (res) {
                if (res.errcode) {
                    var data = res.data || {};
                    var formHtml = tpl_user_info.innerHTML;
                    laytpl(formHtml).render(data, function (html) {
                        formHtml = html;
                    });
                    user_info_index = layer.open({
                        type: 1,
                        anim: 1,
                        title: '基本资料',
                        area: ['500px', '600px'],
                        content: formHtml.toString(),

                        success: function (layero, index) {
                            laydate.render({
                                elem: '#birthday', //指定元素
                                value: new Date(data.birthday) || ''
                            });
                            form.render();
                        }
                    });
                } else {
                    layer.msg(res.errmsg);
                }
            });
        });
        /*个人资料按钮事件监听*/

        /*个人资料修改提交按钮事件监听*/
        form.on('submit(formData)', function (data) {
            $.ajax({
                url: '/persional/userInfo/update',
                type: 'PUT',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.errcode) {
                        layer.close(user_info_index);
                        layui.data('user', {
                            key: 'name',
                            value: data.field.name
                        });
                        laytpl(getUserInfoNav).render(layui.data('user'), function (html) {
                            userInfoView.innerHTML = html;
                        });
                        element.init();
                        layer.msg('修改成功', {icon: 1, time: 1000});
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            });
        });
        /*个人资料修改提交按钮事件监听*/

        /*修改密码按钮事件监听*/
        form.on('submit(safeSet)', function () {
            var formHtml = tpl_safe_set.innerHTML;
            laytpl(formHtml).render({}, function (html) {
                formHtml = html;
            })
            safe_set_index = layer.open({
                type: 1,
                anim: 1,
                title: '安全设置',
                area: ['500px', '300px'],
                content: formHtml.toString(),

                success: function (layero, index) {
                    form.render();
                }
            });
        });
        /*修改密码按钮事件监听*/

        form.on('submit(formSafeSet)', function (data) {
            $.ajax({
                url: '/persional/account/updatePassword',
                type: 'POST',
                contentType: "application/x-www-form-urlencoded",
                data: data.field,
                success: function (res) {
                    if (res.errcode) {
                        layer.close(safe_set_index);
                        layer.msg('修改成功，请重新登陆', {icon: 1, time: 1500}, function () {
                            parent.location.href = base_url + '/login.html';
                        });
                    } else {
                        layer.msg(res.errmsg, {icon: 2, time: 1000});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            });
        });
          form.verify({
              rePassword: function (value, item) {
                  var pwd = $('input[name=newPassword]').val();
                  if (value != pwd) {
                      return "二次密码输入不一致";
                  }
              }
          });
    });
</script>
</body>
</html>